<!--DOCTYPE html-->
<html>
	<head>
		<meta charset="utf-8" />
		<title>Notebook</title>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="style.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/marked"></script>
		<script src="https://unpkg.com/moment"></script>
		<!--侧边栏-->
		<div id="notebook">
			<aside class="side-bar">
				<!--笔记列表-->
				<div class="toolbar">
					<button v-on:click="addNote()" :title="notes.length+' note(s) already'"><i class="material-icons">add</i> Add note </button>
				</div>
				<div class="notes">
					<!--笔记列表显示在这里-->
					<!--直接对notes进行sort会出发watch监听，所以使用slice()进行复制操作-->
					<div class="note" v-for="note of sortedNotes" @click="selectNote(note)" :class="{selected:note===selectedNote}"><i
						 class="icon material-icons" v-if="note.favorite">star</i>{{note.title}}</div>
				</div>
			</aside>
			<template v-if="selectedNote">
				<!--主面板-->
				<section class="main">
					<div class="toolbar">
						<!--新的工具栏-->
						<input v-model="selectedNote.title" placeholder="Note Title">
						<button @click="favoriteNote" title="Favorite note"><i class="material-icons">{{selectedNote.favorite?'star':'star_border'}}</i></button>
						<button @click="removeNote" title="Remove note"><i class="material-icons">delete</i></button>
						<!--button type="button" v-on:click="strong()">加粗</button-->
					</div>
					<textarea id="textarea" v-model="selectedNote.content"></textarea>
					<div class="toolbar status-bar">
						<span class="date">
							<span class="label">Created</span>
							<span class="value">{{selectedNote.created|date}}</span>
						</span>
						<span class="lines">
							<span class="label">Lines</span>
							<span class="value">{{linesCount}}</span>
						</span>
						<span class="lines">
							<span class="label">Words</span>
							<span class="value">{{wordsCount}}</span>
						</span>
						<span class="lines">
							<span class="label">Characters</span>
							<span class="value">{{charactersCount}}</span>
						</span>
					</div>
				</section>
				<!--预览面板-->
				<aside class="preview" v-html="notePreview"></aside>
			</template>
		</div>
		<script src="script.js"></script>
	</body>
</html>
